<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Custom elements</title>
		<style>
			:not(:defined) {
				color: red;
			}
		</style>
	</head>
	<body>
		<my-test-elem>一个未定义的自定义元素</my-test-elem>

		<script>
			// 1. 创建自定义元素
			class MyElement extends HTMLElement {
				constructor() {
					super()
					// 元素在这里创建
					// this.attachShadow({ mode: 'open' }).innerHTML = '这是一个已注册的自定义元素' //  <---  shadow dom
				}

				// 在元素被添加到文档之后（如果一个元素被反复 添加/移除 到文档，那么这个方法会被多次调用），浏览器会调用这个方法。
				connectedCallback() {
					this.innerHTML = '这是一个已注册的自定义元素'
				}

				// 在元素从文档移除的时候（如果一个元素被反复 添加/移除 到文档，那么这个方法会被多次调用），浏览器会调用这个方法。
				disconnectedCallback() {}

				static get observedAttributes() {
					return [
						/* 属性数组，这些属性的变化会被监视 */
					]
				}

				// 当上面数组中的属性发生变化的时候，这个方法会被调用。
				attributeChangedCallback(name, oldValue, newValue) {}

				// 在元素被移动到新的文档的时候，这个方法会被调用。（document.adoptNode 会用到, 非常少见）
				adoptedCallback() {}

				// 还可以添加更多的元素方法和属性......
			}

			// 2. 注册元素
			//（注册后，当任何带有 <my-element> 标签的元素被创建的时候，一个 MyElement 的实例就会被创建，并且前面提到的方法也会被调用。）
			//（同样可以使用 document.createElement('my-element') 在 JavaScript 里创建元素。）
			customElements.define('my-element', MyElement)
		</script>

		<!-- 3. 使用自定义元素 -->
		<my-element />
	</body>
</html>
